<template>
  <div>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item v-for="(item, index) in breadList" :key="index">
        <!-- :to="{ path: item.path==''?'/':item.path }"  -->
        <span @click="toPath(item.path)" v-if="index == 0" class="head-item" >
          {{ item.meta[0].name }}
        </span>
        <span v-else class="head-item-over" >
          {{ item.meta[0].name }}
        </span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "breadcurmbIndex",
  data() {
    return {
      breadList: []
    }
  },
  watch: {
    $route() {
      this.getBreadcrumb()
    }
  },
  created() {
    this.getBreadcrumb()
  },
  methods: {
    toPath(path) {
      let toPath = path
      if (path == "") {
        toPath = "/"
      }
      console.log(window.location.pathname, toPath)
      if (window.location.pathname == toPath || window.location.pathname == '/index') {
        return
      }


      this.$router.push(toPath)
      this.$store.commit("SET_ACTIVE", toPath)
      let tag = {
        id: 'index',
        name: '首页',
        path: '/',
        type: 'info'
      }
      this.$store.commit("SET_TAGVAL", tag)

    },
    isHome(route) {
      return route.path == "/" || route.path == ""
    },
    getBreadcrumb() {
      let matched = this.$route.matched

      if (!this.isHome(matched[0])) {
        matched = [{ path: "/", meta: { name: "首页" } }].concat(matched);
      }
      let then = this
      then.breadList = []
      matched.forEach(function (i, ii) {
        let flg = true
        if (i.path == "/index" && ii == 1) {
          flg = false
        }
        if (flg) {
          then.breadList.push(i)
        }
      })

    }
  }

}
</script>

<style scoped>
.head-item:hover {
  cursor: pointer;
  color: rgb(0, 0, 0);

}
.head-item-over{
  color: rgb(138, 141, 141);
}
</style>